<template>
  <FormIndex ref="ref" data-title="提现" class="content-wrap">
    <div class="content">
      <div class="top">
        <div class="icon"></div>
        <div class="text">提现账户</div>
      </div>
      <FormItem
        :rules="[{ type: 'required', message: '请输入姓名' }]"
        :value="withdrawal.alipay_name"
        class="input"
      >
        <div class="label">姓名</div>
        <input
          v-model="withdrawal.alipay_name"
          type="text"
          placeholder="请输入姓名"
        />
      </FormItem>
      <FormItem
        :rules="[{ type: 'required', message: '请输入支付宝账户' }]"
        :value="withdrawal.alipay_phone"
        class="input"
      >
        <div class="label">支付宝账户</div>
        <input
          v-model="withdrawal.alipay_phone"
          type="text"
          placeholder="请输入支付宝账户"
        />
      </FormItem>
      <FormItem
        :rules="[{ type: 'required', message: '请输入提现金额' }]"
        :value="amount"
        class="input"
      >
        <div class="label">金额</div>
        <input v-model="amount" type="text" placeholder="请输入提现金额" />
      </FormItem>
      <div class="input">
        <input @click="submit" type="button" class="btn" value="提交" />
      </div>
    </div>
    <div class="account">
      <div class="title">提现记录</div>
      <div>
        <PullRefresh v-model="loading" @refresh="onRefresh">
          <van-list
            :loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
            >
              <div class="accountItem" v-for="(item, index) in list" :key="index">
                <div class="top">
                    <div class="top-name">{{item.payee_name}}</div>
                    <div class="top-status">{{item.statusName}}</div>
                </div>
                <div class="top">
                    <div class="amount">金额：{{item.withdrawal_amount}}</div>
                </div>
                <div>
                    <div class="time">申请时间：{{item.apply_time}}</div>
                </div>
              </div>
            </div>
          </van-list>
        </PullRefresh>
      </div>
    </div>
  </FormIndex>
</template>

<script setup>
import request from "@/utils/request.ts";
import FormIndex from "@/components/Form/index.vue";
import FormItem from "@/components/Form/item.vue";
import { ref, onMounted } from "vue";
import { showToast } from "vant";
import useWithdrawal from "@/hooks/useWithdrawal";
const amount = ref("");
const list = ref([]);
const loading = ref(true);
const finished = ref(false);
const pageParams = {
  page: 1,
  pageSize: 15,
};
const { withdrawal, viewAccount } = useWithdrawal();
const submit = async () => {
  request
    .post("/App/api/updateAccount", {
      alipay_name: withdrawal.value.alipay_name,
      alipay_phone: withdrawal.value.alipay_phone,
    })
    .then((res) => {
      request
        .post("/App/api/applyWithdraw", {
          amount: amount.value,
        })
        .then((res) => {
          if (res.status != 200) {
            showToast(res.msg);
          } else {
            showToast("提交成功");
            onRefresh();
          }
        });
    });
};
onMounted(() => {
  viewAccount();
  onRefresh();
});
const onLoad = () => {
  getList(false);
};
const onRefresh = () => {
  getList(true);
};
const getList = (refresh) => {
  if (refresh) {
    pageParams.page = 1;
  } else {
    pageParams.page++;
  }
  loading.value = true;
  finished.value = false;
  request({
    url: "App/api/personCheckLog",
    method: "POST",
    data: {
      ...pageParams,
    },
  }).then((res) => {
    loading.value = false;
    if (refresh) {
      list.value = res.data.data;
    } else {
      list.value = list.value.concat(res.data.data);
    }
    if (res.data.data.length == 0) {
      finished.value = true;
    }
  });
};
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 10rem;
  background-color: #f4f4f4;
  min-height: 100vh;
  overflow: hidden;
}

.content-wrap .content {
  width: 9.36rem;
  background-color: #fff;
  padding-bottom: 0.57333rem;
  border-radius: 0.13333rem;
  margin: 0.32rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-wrap .content .top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.45333rem;
}

.content-wrap .content .top .icon {
  width: 0.72rem;
  height: 0.72rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-alipay.png)
    50%/100% no-repeat;
  margin-left: 0.38667rem;
}

.content-wrap .content .top .text {
  font-size: 0.48rem;
  font-weight: 700;
  color: #333;
  margin-left: 0.28rem;
}

.content-wrap .input {
  width: 8.65333rem;
  height: 1.33333rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  margin: 0 auto;
}

.content-wrap .input .label {
  font-size: 0.4rem;
  font-weight: 500;
  color: #333;
  margin-left: 0.21333rem;
  width: 80px;
}

.content-wrap .input input {
  border: none;
  outline: none;
  margin-left: 0.49333rem;
  font-size: 0.4rem;
  color: #333;
  font-weight: 500;
}

.content-wrap .input .btn {
  width: 300px;
  height: 32px;
  line-height: 手机号;
  text-align: center;
  background: #1677ff;
  color: #fff;
  font-size: 0.37333rem;
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.05333rem;
}

.content-wrap .account {
  width: 9.36rem;
  margin: 0.32rem auto 0;
  background-color: #fff;
  border-radius: 0.13333rem;
  overflow: hidden;
}

.content-wrap .account .title {
  width: 8.65333rem;
  height: 1.2rem;
  line-height: 1.2rem;
  border-bottom: 1px solid #f2f2f2;
  margin: 0 auto;
  font-size: 0.42667rem;
  color: #333;
  font-weight: 700;
}

.content-wrap .account .nodata {
  width: 9.36rem;
  height: 4.41333rem;
  line-height: 4.41333rem;
  text-align: center;
  font-size: 0.34667rem;
  color: #999;
  font-weight: 500;
}

.content-wrap .account .item {
  width: 8.65333rem;
  height: 1.33333rem;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.content-wrap .account .item:last-child {
  margin-bottom: 0.50667rem;
}

.content-wrap .account .item .zh {
  font-size: 0.4rem;
  font-weight: 500;
  color: #333;
  margin-left: 0.12rem;
}

.content-wrap .account .item .often {
  width: 0.98667rem;
  height: 0.42667rem;
  line-height: 0.42667rem;
  text-align: center;
  border: 1px solid #1e81ff;
  border-radius: 0.05333rem;
  color: #167eff;
  margin-left: 0.30667rem;
}

.content-wrap .account .item .checked {
  width: 0.53333rem;
  height: 0.53333rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-checked1.png)
    50%/100% no-repeat;
  margin-left: auto;
  margin-right: 0.10667rem;
}

.content-wrap .account .item .unchecked {
  width: 0.53333rem;
  height: 0.53333rem;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-unchecked1.png)
    50%/100% no-repeat;
  margin-left: auto;
  margin-right: 0.10667rem;
}
.top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 8px;
}
.time{
    padding-left: 10px;
    padding-bottom: 8px;
    font-size: 12px;
    color:#999;
}
.amount{
    font-size: 12px;
    color:#999;
}
.top-name,.top-status{
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.top-status{
    color:red;
}
.accountItem{
    padding-top: 10px;
    border-bottom: 1px solid #f2f2f2;
}
</style>